const { connect } = dva;
const { Form, Form: { Item }, Input, Button } = antd;
const { CrudForm, Password } = require('../../Widgets.jsx');
const { FORM: { item: { layout, tailLayout } } } = require("../../Constants.jsx");
import { namespace } from '../../../models/sys/User.jsx'

class SysUserForm extends CrudForm {
    static defaultProps = {
        namespace: namespace
    };
    render() {
        const { form: { getFieldDecorator, getFieldValue, validateFields }, loading } = this.props;
        return (
            <div style={{padding: '40px 20px'}}>
                <Form onSubmit={this.handleSubmitUrl.bind(this, 'updatePassword')}>
                    <Item
                        {...layout}
                        label={<span className="form-title">密码修改</span>}
                        colon={false}
                    >
                    </Item>
                    <Item
                        {...layout}
                        label="用户名"
                    >
                        {getFieldDecorator('username')(
                            <Input disabled />
                        )}
                    </Item>
                    <Item
                        {...layout}
                        label="新密码"
                    >
                        {getFieldDecorator('password', {
                            rules: [ {
                                required: true, message: '请输入新密码!'
                            }, {
                                min: 3, max: 20, message: '密码长度为3-20!'
                            }, {
                                validator: (rule, value, callback) => {
                                    value && getFieldValue('confirmPassword') ? validateFields(['confirmPassword'], { force: true }) : '';
                                    callback();
                                }
                            } ]
                        })(
                            <Password />
                        )}
                    </Item>
                    <Item
                        {...layout}
                        label="确认密码"
                    >
                        {getFieldDecorator('confirmPassword', {
                            rules: [ {
                                required: true, message: '请输入确认密码!'
                            }, {
                                validator: (rule, value, callback) => {
                                    value && value !== getFieldValue('password') ?
                                        callback('两次密码输入不正确!') : callback()
                                }
                            } ]
                        })(
                            <Password />
                        )}
                    </Item>
                    <Item {...tailLayout}>
                        <Button type="primary" htmlType="submit" disabled={loading} size="large">提交</Button>
                    </Item>
                </Form>
            </div>
        );
    }
}

module.exports = connect(state => {
    return { ...state[namespace], loading: state.loading.models[namespace]  }
})(Form.create()(SysUserForm));